<template>
  <div>
    <Header></Header>
    <div class="container">
      <div class="menu" v-if="menuList.length > 0 && menuList[0].children != null && menuList[0].children.length > 1">
        <div class="menu-item" @click="goTo(item.path)" :class="{active:$route.fullPath.startsWith(item.path)}" v-for="item in menuList[0].children">{{item.meta?item.meta.title:''}}</div>
      </div>
      <router-view class="router-view" />
    </div>
  </div>
</template>

<script>
import Header from './header'

export default {
  name: "Main",
  components:{
    Header
  },
  data(){
    return {
      hideMenu:true
    }
  },
  methods:{
    goTo(path) {
      this.$router.push({path:path})
    },
    toggleMenu(){
      this.hideMenu = !this.hideMenu
    }
  },
  computed:{
    menuList () {
      return this.$store.state.menuList
    }
  }
}
</script>

<style scoped lang="less">
  .container {
    position: fixed;
    top: 40px;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;

    .menu {
      width: 200px;
      height: 100%;
      border-right: 1px solid #F0F0F0;
      flex-shrink: 0;

      .menu-item {
        height: 40px;
        line-height: 40px;
        color: #333;
        padding: 5px 15px;
        cursor: pointer;
        font-size: 14px;

        &:hover {
          color: #0091FF;
        }

        &.active {
          background: #0091FF;
          color: #FFF;
          font-size: 14px;
        }
      }
    }
    .router-view {
      flex: 1;
      overflow: hidden;
      overflow-y: auto;
    }
  }

  @media(max-width: 679px) {
    .container {
      flex-direction: column;

      .menu {
        height: 40px;
        display: flex;
        justify-content: center;
        width: 100%;
        overflow: hidden;
        overflow-x: auto;
        box-shadow: 0 -2px 4px 0 var(--cb-color-shadow, rgba(0, 0, 0, 0.16)) inset;

        &::-webkit-scrollbar {
          display: none;
        }

        .menu-item {
          height: 40px;
          padding: 0;
          line-height: 40px;
          text-align: center;
          min-width: 100px;
          color: #333;
          cursor: pointer;
          font-size: 14px;

          &.active {
            background: #0091FF;
            color: #FFF;
            font-size: 14px;
          }
        }
      }
    }
  }
</style>
